﻿<Window x:Class="Animation.KeySplineAnimation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="KeySplineAnimation" Height="249.6" Width="624"
    >
  <Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimationUsingKeyFrames
             Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Canvas.Left)" >
              <SplineDoubleKeyFrame KeyTime="0:0:5" Value="250" KeySpline="0.25,0 0.5,0.7"></SplineDoubleKeyFrame>
              <SplineDoubleKeyFrame KeyTime="0:0:10" Value="500" KeySpline="0.25,0.8 0.2,0.4"></SplineDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimation
            Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Canvas.Left)"
            To="500" Duration="0:0:10">              
            </DoubleAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Window.Triggers>
  <Canvas Margin="10">
    <Ellipse Name="ellipse1" Canvas.Left="0" Fill="Red" Width="10" Height="10"></Ellipse>
    
    <Path Stroke="Blue" StrokeThickness="1" StrokeDashArray="2 1" Canvas.Top="25">
      <Path.Data>
        <PathGeometry>
          <PathFigure>
            <BezierSegment Point1="25,0" Point2="50,70" Point3="100,100" />
          </PathFigure>
        </PathGeometry>
      </Path.Data>
      <Path.RenderTransform>
        <ScaleTransform ScaleX="2.5"></ScaleTransform>
      </Path.RenderTransform>
    </Path>
    <Path Stroke="Blue" StrokeThickness="1" StrokeDashArray="2 1" Canvas.Left="250" Canvas.Top="25">
      <Path.Data>
        <PathGeometry>
          <PathFigure>            
            <BezierSegment Point1="25,80" Point2="20,40" Point3="100,100" />
          </PathFigure>
        </PathGeometry>
      </Path.Data>
      <Path.RenderTransform>
        <ScaleTransform ScaleX="2.5"></ScaleTransform>
      </Path.RenderTransform>
    </Path>
    
    <Ellipse Name="ellipse2" Canvas.Top="150" Canvas.Left="0" Fill="Red" Width="10" Height="10"></Ellipse>
  </Canvas>
</Window>
